<template>
  <el-dialog
    :visible="visible"
    :title="$t('modules.tms.batch.trace_switch')"
    width="60%"
    @close="handleClose"
  >
    <div class="container">
      <div class="blocks" style="width: 100%">
        <el-form
          @submit.prevent.native
          ref="geoTraceForm"
          :model="dataForm"
          :rules="rules"
          label-width="150px"
        >
          <el-form-item :label="$t('modules.tms.batch.trace_switch')+':'" prop='geoTraceFlag'>
            <el-switch v-model="dataForm.geoTraceFlag" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item :label="$t('common.remark')+':'" prop="remark">
            <el-input
              v-model="dataForm.remark"
              type="textarea"
              maxlength="128"
              show-word-limit
              :placeholder="$t('common.remark')"
              :rows="5"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="handleClose()">{{ $t('page.cancel') }}</el-button>
        <el-button size="small" type="primary" :loading="confirmLoading" @click="doOperation()">{{ $t('common.confirm') }}</el-button>
      </span>
  </template>
  </el-dialog>
</template>

<script>
import { switchGeoTrace } from '@/api/batch'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      batchId: '',
      confirmLoading: false,
      dataForm: {
        geoTraceFlag: 0,
        remark: ''
      },
      rules: {

      }
    }
  },
  mounted() {
    this.batchId = this.$route.params.batchId
  },
  methods: {
    handleClose() {
      this.$refs.geoTraceForm.resetFields()
      this.$emit('close')
    },
    doOperation() {
      this.confirmLoading = true
      const params = {
        geoTraceFlag: this.dataForm.geoTraceFlag,
        remark: this.dataForm.remark
      }
      switchGeoTrace(this.batchId, params).then(() => {
        this.$message({
          message: this.$t('modules.tms.batch.setting_success'),
          type: 'success',
          onClose: () => {
            this.handleClose()
          }
        })
      }).catch(this.$confirmError).finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 86px;
}

</style>
